<template>
  <div id="collectInfo">
    <v-header title="问题详情"  :saveShow="false" :showDownloadBtn="false"></v-header>
    <div style="height: calc(100% - 56px); padding: 10px 0 20px 10px; overflow-y: scroll;">
      <div class="header">
        <el-button type="text" icon="el-icon-arrow-left" class="back-btn" @click="comeback()">返回</el-button>
        <p>{{bugListOpt.exp_title}}</p>
      </div>
      <div class="info">
        <div class="info_main">
          <div class="main_right">
            <div class="right_header">
              <p style="font-size: 16px;word-break: break-all;word-wrap: break-word">{{bugListOpt.exp_desc}}</p>
            </div>
            <div class="detailed">
              <div class="detailedInfo">
                <el-tabs v-model="tabs" @tab-click="tabsClick">
                  <el-tab-pane label="设备信息" name="device">
                    <div class="deviceinfo">
                      <el-row>
                        <el-col :span="12">设备信息: {{deviceInfo.dev_info}}</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">分辨率: {{deviceInfo.dev_vision}}</el-col>
                        <el-col :span="12">内存信息: {{deviceInfo.dev_ram}}</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">硬盘容量: {{deviceInfo.dev_disk}}</el-col>
                        <el-col :span="12">电量: {{deviceInfo.dev_power}}</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">网络型号: {{deviceInfo.dev_net}}</el-col>
                        <el-col :span="12" v-if="deviceInfo.dev_isroot === '1'">是否root: 否</el-col>
                        <el-col :span="12" v-if="deviceInfo.dev_isroot === '0'">是否root: 是</el-col>
                      </el-row>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="堆栈信息" name="stack">
                    <div class="stack">
                      <code style="white-space: pre-wrap">{{stack}}</code>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { VHeader } from '../../components'
import { nextPage } from '../../assets/js/index'
import 'echarts/lib/component/tooltip'
import ajax from '../../api/ajax/ajax'
import api from '../../api/url'
import { mixinParams } from '../../assets/js/mixin1'
import { mapGetters } from 'vuex'
export default {
  components: {
    VHeader
  },
  mixins: [mixinParams],
  data () {
    return {
      deviceInfo: {},
      stack: '',
      tabs: 'device'
    }
  },
  computed: {
    ...mapGetters([
      'bugListOpt'
    ])
  },
  methods: {
    comeback () {
      nextPage('/home/collect')
    },
    tabsClick (tab) {},
    querySelectBugInfoById () {
      let params = {
        exp_id: this.bugListOpt.exp_id,
        app_ver: this.bugListOpt.app_ver
      }
      ajax.post(api.SELECT_BUG_INFO_BYID, params)
        .then(res => {
          if (res.data) {
            this.stack = res.data
          }
        })
    },
    // 查询设备信息
    queryDeviceInfo () {
      ajax.post(api.SELECT_DEVICE, {id: this.bugListOpt.id})
        .then(res => {
          if (res.data) {
            this.deviceInfo = res.data
          }
        })
    }
  },
  mounted () {
    this.queryDeviceInfo()
    this.querySelectBugInfoById()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  #collectInfo
    height 100%
    .left
      float left
    .right
      float right
    .header
      height 60px
      border-bottom 1px solid #f8f8f8
      background-color #fff
      padding 10px 15px
      font-size 16px
      line-height 40px
      color #000
      .back-btn
        float left
        font-size 14px
        padding 0
        line-height 40px
        height 40px
      &>p
        float left
        margin-left 25px
        text-align left
      .avatar
        width 50px
        height 50px
        border-radius 50%
        background-color red
    .info
      .info_header
        height 50px
        line-height 50px
        padding 0 15px
        background-color #ffffff
        border-bottom 1px solid #f8f8f8
      .info_header:after, .info_main:after
        content ''
        display table
        clear both
      .info_main
        background-color #fff
        .main_left
          padding 0 10px
          margin-right 30px
          background-color #fff
          .track
            p
              margin-bottom 10px
            padding-top 20px
            padding-left 10px
            width 70px
            .el-checkbox+.el-checkbox
              margin-left 0
              margin-top 20px
            .el-checkbox-group
              margin-left 10px
          .buttons
            width 60px
            margin-top 15px
            button
              width 150px
              margin-left 30px
              margin-bottom 30px
            .el-button+.el-button
              margin-left 30px
        .main_right
          .right_header
            height 30px
            line-height 30px
          margin 0 auto
          padding 10px 15px
          width 100%
          background-color #fff
          .detailed
            .detailed_header
              display flex
              justify-content space-between
              padding 10px 0
              .item
                flex 1
                margin 0 10px
                padding 25px 15px
                font-size 12px
                line-height 20px
                text-align center
                height auto
                &:first-child
                  margin-left 0
                &:last-child
                  margin-right 0
                & > strong
                  display block
                  font-weight normal
                  font-size 32px
                  line-height 28px
                  margin-bottom 5px
              div
                width 190px
                height 75px
                background-color #f8f8f8
            .detailedInfo
              min-height 400px
              .el-row
                margin-bottom 0
              .el-col
                height 30px
                line-height 30px
              .deviceinfo
                padding 15px
              .stack
                padding 15px
                background #f5f5f5
</style>
